<template>
  <div class="cloudmsg-setting">
    <!--<div style="margin-bottom: 25px;height:60px;width:100%;">-->
      <!--<sticky :sticky-top="80" class-name="cloudmsg-setting-submit">-->
        <!--<el-button type="primary">保存</el-button>-->
      <!--</sticky>-->
    <!--</div>-->
    <div class="cloudmsg-setting-opened">
      <div class="cloudmsg-setting-opened-switch">
        <div class="cloudmsg-setting-opened-switch-header">云短信开关</div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          label-width="207px"
          class="cloudmsg-setting-opened-settingForm"
        >
          <el-form-item label="启用云短信:" prop="switch">
            <span style="color:#409EFF;margin-right:10px;">已启用</span>
            <el-button type="danger" size="mini" @click="handleClickClose">关闭</el-button>
            <!--<p>-->
              <!--教学资讯，极速送达，尽在掌握。点击-->
              <!--<a href="www.163.com" style="color:#428bca">这里</a>-->
              <!--了解详情-->
            <!--</p>-->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
export default {
  components: {
    Sticky
  },
  data() {
    return {
      ruleForm: {
        sign: 'bjtest1',
        singleDayLimit: '300'
      },
      tableData: [
        {
          msgType: '验证类',
          isDefault: true,
          status: true
        },
        {
          msgType: '验证类',
          isDefault: true,
          status: true
        },
        {
          msgType: '验证类',
          isDefault: true,
          status: true
        },
        {
          msgType: '通知类',
          isDefault: false,
          status: true
        },
        {
          msgType: '通知类',
          isDefault: false,
          status: true
        },
        {
          msgType: '通知类',
          isDefault: false,
          status: true
        },
        {
          msgType: '通知类',
          isDefault: false,
          status: true
        },
        {
          msgType: '通知类',
          isDefault: false,
          status: true
        },
        {
          msgType: '通知类',
          isDefault: false,
          status: true
        },
        {
          msgType: '通知类',
          isDefault: false,
          status: true
        },
        {
          msgType: '通知类',
          isDefault: false,
          status: true
        },
        {
          msgType: '回执类',
          isDefault: false,
          status: true
        },
        {
          msgType: '回执类',
          isDefault: false,
          status: true
        },
        {
          msgType: '回执类',
          isDefault: false,
          status: true
        },
        {
          msgType: '回执类',
          isDefault: false,
          status: true
        }
      ],
      rules: {}
    }
  },
  methods: {
    handleClickClose() {
      this.$emit('close')
    },
    handleChange(val, scope) {
      // 一个单选控制4个回执类的status
      const _this = this
      if (scope.row.msgType === '回执类') {
        _this.tableData.forEach(item => {
          if (item.msgType === '回执类') {
            item.status = val
          }
        })
      }
      console.log(_this.tableData)
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 5 && rowIndex === 11) {
        if (rowIndex % 11 === 0) {
          return {
            rowspan: 4,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>

<style lang="scss">
.cloudmsg-setting {
  &-opened {
    &-settingForm {
      p {
        color: #737373;
        margin: 0;
        margin-left: 40px;
      }
      .el-form-item__label {
        margin-right: 40px;
        font-size: 16px;
      }
      .videoupload {
        margin-left: 40px;
      }
    }
    &-switch {
      overflow: hidden;
      &-header {
        font-size: 16px;
        padding: 10px 20px;
        border-bottom: 1px solid #ddd;
        background-color: #fafafa;
        margin-bottom: 10px;
      }
    }
    &-basic {
      overflow: hidden;
      &-header {
        font-size: 16px;
        padding: 10px 20px;
        border-bottom: 1px solid #ddd;
        background-color: #fafafa;
        margin-bottom: 10px;
      }
      &-settingForm {
        .el-form-item__label {
          margin-right: 60px;
          font-size: 16px;
        }
      }
    }
    &-safe {
      overflow: hidden;
      &-header {
        font-size: 16px;
        padding: 10px 20px;
        border-bottom: 1px solid #ddd;
        background-color: #fafafa;
        margin-bottom: 10px;
      }
    }
    &-template {
      overflow: hidden;
      &-header {
        font-size: 16px;
        padding: 10px 20px;
        border-bottom: 1px solid #ddd;
        background-color: #fafafa;
        margin-bottom: 10px;
      }
    }
  }
  &-submit {
    width: 100%;
    line-height: 60px;
    height: 60px !important;
    text-align: right;
    padding-right: 30px;
    background-color: #ebf4ff;
  }
}
</style>
